<template>
    <div>
        <div class="filter-container">
            <el-input
                    v-model="tableQuery.queryMap.title"
                    placeholder="问卷标题"
                    style="width: 200px;"
                    @keyup.enter.native="getTableList"
            >
            </el-input>
            <el-button
                    type="success"
                    @click="getTableList"
            >
                查询
            </el-button>
            <el-button
                    type="primary"
                    @click="openAddDlg"
            >
                新增
            </el-button>
        </div>
        <el-table
                :data="tableList"
                border
                height="680"
                style="width: 100%"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column
                    prop="title"
                    label="问卷标题"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="purpose"
                    label="备注信息"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.purpose }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="问卷状态"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.state | stateFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createOwner"
                    label="创建者"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.createOwner }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="answerCount"
                    label="问题个数"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.answerCount }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="mouldType"
                    label="问卷分类"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.mouldType | typeFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="软删"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.status | statusFilter }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="cstCreate"
                    label="创建时间"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.cstCreate | dateTimeFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="cstModify"
                    label="修改时间"
                    sortable
                    align="center"
                    width="200"
                    :show-overflow-tooltip=true
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.cstModify | dateTimeFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="260"
                    class-name="small-padding fixed-width"
            >
                <template slot-scope="{row}">
                    <el-button
                            type="success"
                            size="mini"
                            @click="gotoLookItem(row)">
                        查看题目
                    </el-button>
                    <el-button
                            type="warning"
                            size="mini"
                            @click="publish(row)">
                        发布
                    </el-button>
                    <el-button
                            type="primary"
                            size="mini"
                            @click="openLookDlg(row)">
                        查看
                    </el-button>
                    <el-button
                            type="warning"
                            size="mini"
                            @click="openUpdateDlg(row)">
                        编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteTableData(row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :current-page="tableQuery.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="tableQuery.rows"
                layout="sizes, prev, pager, next, total"
                :total="tableQuery.total">
        </el-pagination>
        <el-dialog :title="editDlgTitle" :visible.sync="editDlgVisible" custom-class="customWith" width="70%">
            <edit-form
                    ref="editForm"
                    :close-dlg="hideDlg"
                    :row-data="currentRow"
                    :refresh-table="getTableList"
                    :is-add="isAdd"
                    :is-disabled="isDisabled"
            ></edit-form>
        </el-dialog>
    </div>
</template>

<script>
    import { get, post ,postBody} from '@/utils/httpUtil'
    import EditForm from './components/EditForm'
    import filters from '@/utils/filters'
    export default {
        name: "QuestionMouldIndex"
        ,components: {
            EditForm
        }
        ,filters: {
            dateFilter: filters.dateFilter,
            dateTimeFilter: filters.dateTimeFilter,
            stateFilter(val) {
                return val==0?"草稿":val==1?"可发布":val==2?"发布中":"已结束";
            },
            typeFilter(val){
                return val==0?"普通问卷调查":val==1?"计分题":val==2?"逻辑分析归类题":"其他";
            },
            statusFilter(val){
                return val==0?"可用":val==1?"禁用":"其他";
            },
        }
        ,data() {
            return {
                tableList: [],
                tableQuery: {
                    queryMap: {
                    },
                    page:1,
                    rows: 10,
                    total: 10
                },
                currentRow: {},
                editDlgTitle:"数据编辑窗口",
                editDlgVisible: false,
                isAdd: true,
                isDisabled: false
            }
        }
        ,methods: {
            handleSizeChange(val) {
                this.tableQuery.rows = val
                this.getTableList()
            },
            handlePageChange(val) {
                this.tableQuery.page = val
                this.getTableList()
            },
            getTableList() {
                get("/questionMould/getPage", this.tableQuery).then(resp => {
                    if (resp.result) {
                        this.tableList = resp.data.list
                        this.tableQuery.total = resp.data.total
                    }
                })
            },
            openLookDlg(row) {
                this.currentRow = Object.assign({}, row)
                this.editDlgTitle='查看问卷'
                this.editDlgVisible = true
                this.isDisabled = true
            },
            openAddDlg(row) {
                this.currentRow = {}
                this.editDlgTitle='新增问卷'
                this.editDlgVisible = true
                this.isAdd = true
                this.isDisabled = false
                // 调用表单初始化方法
                this.$nextTick(() => {
                    this.$refs.editForm.initFormData()
                })
            },
            publish(row){
                let rowData = Object.assign({}, row);
                rowData.state =2;
                let url = "/questionMould/update";
                postBody(url, rowData).then(resp => {
                    if(resp.data.result) {
                        this.$notify({
                            title: '提示',
                            message: '发布成功！',
                            type: 'success',
                            duration: 2000
                        })
                        // 刷新列表
                        this.getTableList()
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '发布失败！'+resp.data.msg,
                            type: 'warning',
                            duration: 2000
                        })
                    }
                })
            },
            openUpdateDlg(row) {
                if(row.state ===2 || row.state ===3){
                    this.$notify({
                        title: '提示',
                        message: '已经发布的问卷不能再次修改,影响已回答的用户！',
                        type: 'warning',
                        duration: 2000
                    })
                }
                this.currentRow = Object.assign({}, row)
                this.editDlgTitle='编辑问卷'
                this.editDlgVisible = true
                this.isAdd = false
                this.isDisabled = false
                // 调用表单初始化方法
                this.$nextTick(() => {
                    this.$refs.editForm.initFormData()
                })
            },
            hideDlg() {
                this.editDlgVisible = false
            },
            deleteTableData(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id: row.id
                    }
                    post("/questionMould/delById", data).then(response => {
                        if (response.data.result) {
                            this.getTableList()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '删除失败!'+response.data.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            gotoLookItem(row){
                this.$router.push({name: 'createQue', query: {mid: row.id,mtitle:row.title }})
                //拼接
                // this.$router.push({path: '/home/createQue', query: {mid: row.id,mtitle:row.title }})
            },
        }
        ,created() {
            this.getTableList()
        }
    }
</script>

<style scoped>
    .filter-container {
        text-align: left;
        margin-bottom: 10px;
    }
</style>
